<template>
  <div v-if="loading"
       style="position: fixed;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
    <Loading size="24px" vertical>数据整理中...</Loading>
  </div>
  <div style="position: relative;" v-else="loading">
    <div
        style="background-color: #fff;height: 58px;display: flex;align-items: center;z-index:9999;position:fixed;width:100%;top:0;border-radius:0 0 15px 15px;">
      <div
          style="display:flex;font-family: PingFangSC-Medium;font-size: 20px;
                     color: #454592;letter-spacing: 0.38px;text-align: justify;line-height: 30px;margin:12px 0 12px 28px;
                     width: 160px;height: 34px;background: rgba(69,69,146,0.06);border-radius: 17.5px;margin-left: 12px;">
        <div style="width: 65%;display: flex;justify-content: center;align-items: center">{{ cal_label }}</div>
        <div style="width: 20%;display: flex;justify-content: center;align-items: center;">
          <div style="margin-right:5px;z-index: 6" @click="MonthReduction()"><img :src="left_icon"
                                                                                  style="width: 24px;height: 24px;padding-top: 2px;">
          </div>
          <div style="z-index: 6" @click="AddMonth()"><img :src="right_icon"
                                                           style="width: 24px;height: 24px;padding-top: 2px;">
          </div>
        </div>
      </div>
      <div
          style="position: absolute;right: 0px;font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;line-height: 16px;width: 47%;display: flex;word-break: break-all;">
        <img :src="Combined" style=" display: inline-block;vertical-align: middle;">
        <div  style=" display: inline-block;vertical-align: middle;">{{ buName }}</div>
      </div>
    </div>
    <!--饼图-->
    <div class="wrapper">
      <div class="title">
        <div class="title_block"></div>
        <div class="title_text">团队概况</div>
        <div class="title_detail" style="display: none">
          <div style="float: left">详情</div>
          <div style=" float: left;margin-top: 2px;margin-left: 3px;">
            <img :src="right"/>
          </div>
        </div>
      </div>
      <div class="field_item">
        <div class="field_item_part">
          <div class="field_item_part_title">
            <div class="field_item_part_title_font">当月完成度</div>
            <div class="field_item_part_title_icon">
              <img :src="info" @click="ClickOnTheMonth"/>
              <div v-if="sameMonth" class="demo">
                <div class="out" @click="ClickOnTheMonth"></div>
                <div class="in">
                  <div style="padding: 13px">
                    <div v-if="UserType=='DM'">
                      <p class="pStyle1">当月按计划正确拜访的目标医生数/所有目标医生数</p>
                    </div>
                    <div v-if="UserType=='RM'">
                      <p class="pStyle1">当月按计划正确拜访的目标医生数/所有目标医生数</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-circle
              v-model="current_num"
              stroke-width="60"
              :rate="dayPie.rate"
              :speed="100"
              :color="gradientColor"
              layer-color="#31317e"
              style="width: 135px;height: 135px;margin-left: 15px;margin-top: 10px"
          >
            <div slot="default" style="width: 100%;height: 100%;">
              <div class="slot1">{{ dayPie.rate + '%' }}</div>
              <div class="slot2">实际正确覆盖医生</div>
              <div class="slot3">{{ dayPie.current }}/{{ dayPie.total }}</div>
            </div>
          </van-circle>
        </div>
        <div class="field_item_part">
          <div class="field_item_part_title">
            <div class="field_item_part_title_font">当季完成度</div>
            <div class="field_item_part_title_icon">
              <img :src="info" @click="ClickOnTheSeason"/>
              <div v-if="pointSeason" class="demo2">
                <div class="out2" @click="ClickOnTheSeason"></div>
                <div class="in2">
                  <div style="padding: 13px">
                    <div style="margin-bottom: 15px" v-if="UserType=='DM'">
                      <p class="pStyle2">季度内每个月均按计划正确拜访的目标医生数/所有目标医生数</p>
                    </div>
                    <div style="margin-bottom: 15px" v-if="UserType=='RM'">
                      <p class="pStyle2">季度内每个月均按计划正确拜访的目标医生数/所有目标医生数</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-circle
              v-model="month_num"
              :rate="monthPie.rate"
              stroke-width="60"
              speed="70"
              :color="gradientColor"
              layer-color="#31317e"
              style="width: 135px;height: 135px;margin-left: 15px;margin-top: 10px"
          >
            <div slot="default" style="width: 100%;height: 100%;">
              <div class="slot1">{{ monthPie.rate + '%' }}</div>
              <div class="slot2">实际正确覆盖医生</div>
              <div class="slot3">{{ monthPie.current }}/{{ monthPie.total }}</div>
            </div>
          </van-circle>
        </div>
      </div>
    </div>

    <van-tabs v-model="activeName" line-width="50%" color="#454592" title-active-color="#454592"
              background="none"
              title-inactive-color="#333333"
              line-height="2px"
              @change="tabChange">
      <van-tab title="按月度" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;" style="height: 45vh;"
               name="a">
        <div style="display: flex;flex-direction: column;padding: 21px 12px 21px 12px;">
          <div
              style="display: flex;flex-direction: row;align-items: center;margin-bottom: 12px;color: #333333;">
            <div style="display: flex;flex: 5;flex-direction: row;align-items: center;padding-left: 5px;">
              <div class="items">姓名</div>
              <div class="items">SC</div>
              <div class="items">EC</div>
              <div class="items">CC</div>
              <div class="itemsTC" style="color: #454592;">TC
                <div style="display: flex;align-items:center;position: relative;">
                  <img :src="info" style="margin-left: 2px;" @click="TCPoints"/>
                  <div v-if="tc" class="demo1">
                    <div class="out1" @click="TCPoints"></div>
                    <div class="in1">
                      <div style="padding: 9px">
                        <div style="margin-bottom: 15px">
                          <p class="pStyle">TC指Total Call,是对所有提交的拜访报告的计数</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="items" style="color: #A1A1A1;">MEM</div>
              <div class="items">详情</div>
            </div>
          </div>
          <div class="parent-dom" style="height: 40vh;">
            <vue-scroll :ops="ops">
              <div class="child-dom">
                <div class="list_item" v-for="(item, index) in infoList" v-bind:key="index">
                  <div class="item_top" :style="item.select?'border-radius: 5px 5px 0 0;':''">
                    <div style="display: flex;flex: 5;flex-direction: row;align-items: center;padding-left: 5px;">
                      <div class="items">{{ item.name }}</div>
                      <div class="items">{{ item.sc }}
                        <!--<div v-if="item.breakWords"-->
                        <!--style="display: flex;flex-direction: column;">-->
                        <!--<div>{{ item.sc }}/</div>-->
                        <!--<div>{{item.scPlan}}</div>-->
                        <!--</div>-->
                        <!--<div v-else style="display: flex;">-->
                        <!--{{ item.sc }}/{{item.scPlan}}-->
                        <!--</div>-->
                      </div>
                      <div class="items">{{ item.ec }}
                        <!--<div v-if="item.breakWords"-->
                        <!--style="display: flex;flex-direction: column;">-->
                        <!--<div>{{ item.ec }}/</div>-->
                        <!--<div>{{item.ecPlan}}</div>-->
                        <!--</div>-->
                        <!--<div v-else style="display: flex;">-->
                        <!--{{ item.ec }}/{{item.ecPlan}}-->
                        <!--</div>-->
                      </div>
                      <div class="items">{{ item.cc }}
                        <!--<div v-if="item.breakWords"-->
                        <!--style="display: flex;flex-direction: column;">-->
                        <!--<div>{{ item.cc }}/</div>-->
                        <!--<div>{{item.ccPlan}}</div>-->
                        <!--</div>-->
                        <!--<div v-else style="display: flex;">-->
                        <!--{{ item.cc }}/{{item.ccPlan}}-->
                        <!--</div>-->
                      </div>
<!--                      <div class="items" v-if="item.tc>item.tcplan" style="color: #00A590">-->
                        <div v-if="item.breakWords"
                             class="items " style="flex-direction: column">
                          <div>{{ item.tc }}/</div>
                          <div>{{ item.tcplan }}</div>
                        </div>
                        <div v-else class="items">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
<!--                      </div>-->
<!--                      <div class="items" v-else style="color: #D1242D">-->
<!--                        <div v-if="item.breakWords" style="display: flex;flex-direction: column;">-->
<!--                          <div>{{ item.tc }}/</div>-->
<!--                          <div>{{ item.tcplan }}</div>-->
<!--                        </div>-->
<!--                        <div v-else style="display: flex;">-->
<!--                          {{ item.tc }}/{{ item.tcplan }}-->
<!--                        </div>-->
<!--                      </div>-->
                      <div class="items" style="color: #A1A1A1;">{{ item.mem }}</div>
                      <div class="items">
                        <img :src="item_down" @click="ClickDetails(item.territoryCd)"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </vue-scroll>
          </div>
        </div>
      </van-tab>
      <van-tab title="按季度" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;" style="height: 45vh;"
               name="b">
        <div style="display: flex;flex-direction: column;padding: 21px 12px 21px 12px;">
          <div
              style="display: flex;flex-direction: row;align-items: center;margin-bottom: 12px;color: #333333;">
            <div style="display: flex;flex: 5;flex-direction: row;align-items: center;padding-left: 5px;">
              <div class="items">姓名</div>
              <div class="items">SC</div>
              <div class="items">EC</div>
              <div class="items">CC</div>
              <div class="items" style="color: #454592;">TC
                <div style="display: flex;align-items:center;position: relative;">
                  <img :src="info" style="margin-left: 2px;" @click="TCPoints"/>
                  <div v-if="tc" class="demo1">
                    <div class="out1" @click="TCPoints"></div>
                    <div class="in1">
                      <div style="padding: 9px">
                        <div style="margin-bottom: 15px">
                          <p class="pStyle">TC指Total Call,是对所有提交的拜访报告的计数</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="items" style="color: #A1A1A1;">MEM</div>
              <div class="items">详情</div>
            </div>
          </div>
          <div class="parent-dom" style="height: 40vh;">
            <vue-scroll :ops="ops">
              <div class="child-dom">
                <div class="list_item" v-for="(item, index) in infoList1" v-bind:key="index">
                  <div class="item_top" :style="item.select?'border-radius: 5px 5px 0 0;':''">
                    <div style="display: flex;flex: 5;flex-direction: row;align-items: center;padding-left: 5px;">
                      <div class="items">{{ item.name }}</div>
                      <div class="items">{{ item.sc }}
                        <!--<div v-if="item.breakWords"-->
                        <!--style="display: flex;flex-direction: column;">-->
                        <!--<div>{{ item.sc }}/</div>-->
                        <!--<div>{{item.scPlan}}</div>-->
                        <!--</div>-->
                        <!--<div v-else style="display: flex;">-->
                        <!--{{ item.sc }}/{{item.scPlan}}-->
                        <!--</div>-->
                      </div>
                      <div class="items">{{ item.ec }}
                        <!--<div v-if="item.breakWords"-->
                        <!--style="display: flex;flex-direction: column;">-->
                        <!--<div>{{ item.ec }}/</div>-->
                        <!--<div>{{item.ecPlan}}</div>-->
                        <!--</div>-->
                        <!--<div v-else style="display: flex;">-->
                        <!--{{ item.ec }}/{{item.ecPlan}}-->
                        <!--</div>-->
                      </div>
                      <div class="items">{{ item.cc }}
                        <!--<div v-if="item.breakWords"-->
                        <!--style="display: flex;flex-direction: column;">-->
                        <!--<div>{{ item.cc }}/</div>-->
                        <!--<div>{{item.ccPlan}}</div>-->
                        <!--</div>-->
                        <!--<div v-else style="display: flex;">-->
                        <!--{{ item.cc }}/{{item.ccPlan}}-->
                        <!--</div>-->
                      </div>
<!--                      <div class="items" v-if="item.tc>item.tcplan" style="color: #00A590">-->
                        <div v-if="item.breakWords"
                             class="items " style="flex-direction: column">
                          <div>{{ item.tc }}/</div>
                          <div>{{ item.tcplan }}</div>
                        </div>
                        <div v-else class="items">
                          {{ item.tc }}/{{ item.tcplan }}
                        </div>
<!--                      </div>-->
<!--                      <div class="items" v-else style="color: #D1242D">-->
<!--                        <div v-if="item.breakWords" style="display: flex;flex-direction: column;">-->
<!--                          <div>{{ item.tc }}/</div>-->
<!--                          <div>{{ item.tcplan }}</div>-->
<!--                        </div>-->
<!--                        <div v-else style="display: flex;">-->
<!--                          {{ item.tc }}/{{ item.tcplan }}-->
<!--                        </div>-->
<!--                      </div>-->
                      <div class="items" style="color: #A1A1A1;">{{ item.mem }}</div>
                      <div class="items">
                        <img :src="item_down" @click="ClickDetails1(item.territoryCd)"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </vue-scroll>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import left_icon from '@assets/icon/chevron_left.svg'
import right_icon from '@assets/icon/chevron_right.svg'
import Combined from '@assets/icon/Combined.svg'
import dayjs from 'dayjs'
import right from "@assets/icon/right.svg";
import info from "@assets/icon/16.svg";
import item_down from '@assets/icon/item_down.svg'
import vuescroll from 'vuescroll';
import {getToken, getProgreessOfManageDataOnDM, getProgreessOfManageDataOnRM} from '@api/tm'
import {
  Loading,
  Circle,
  Tab,
  Tabs
} from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Circle);
Vue.use(vuescroll);
export default {
  name: "index",
  components: {
    Loading,
    Tab,
    Tabs,
    vuescroll
  },
  data() {
    return {
      cal_label: '',
      loading: false,
      left_icon: left_icon,
      right_icon: right_icon,
      Combined: Combined,
      day: "",
      buName: "",
      right: right,
      info: info,
      current_num: 100,
      dayPie: {
        total: 0,
        current: 0,
        rate: 0,
      },
      gradientColor: {
        "2%": "#EEEEFF",
        "17%": "#BCBCFB",
        "49%": "#9292F9",
        "80%": "#8282FA",
        "100%": "#8888F2",
      },
      month_num: 100,
      monthPie: {
        total: 0,
        current: 0,
        rate: 0,
      },
      activeName: "a",
      tc: false,
      infoList: [], // 信息列表
      infoList1: [], // 信息列表
      item_down: item_down,
      sameMonth: false,
      pointSeason: false,
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {},
        bar: {
          background: '#454592',
          opacity: "0.1"
        }
      },
      tokenString: "",
      token: [],
      UserType: ""
    }
  },
  methods: {
    //日期减一个月
    MonthReduction() {
      this.day = dayjs(this.day).subtract(1, 'month').format("YYYY/MM/DD")
      this.cal_label = dayjs(this.day).format("YYYY/MM");
      let monthId = dayjs(this.day).format("YYYYMM")
      this.infoList = [];
      this.infoList1 = [];
      this.dayPie = {
        total: 0,
        current: 0,
        rate: 0,
      }
      this.monthPie = {
        total: 0,
        current: 0,
        rate: 0,
      }
      let m = dayjs(monthId).month()
      let y = dayjs(monthId).year()
      let q = ''
      if (m < 3) {
        q = "Q1"
      } else if (m < 6) {
        q = "Q2"
      } else if (m < 9) {
        q = "Q3"
      } else {
        q = "Q4"
      }
      var quarterId = y + q;
      if (this.UserType == "DM") {
        this.getMessages(monthId, quarterId);
      }
      if (this.UserType == "RM") {
        this.getMessagesRM(monthId, quarterId);
      }
    },
    //日期加一个月
    AddMonth() {
      this.day = dayjs(this.day).add(1, 'month').format("YYYY/MM/DD")
      this.cal_label = dayjs(this.day).format("YYYY/MM")
      let monthId = dayjs(this.day).format("YYYYMM")
      this.infoList = [];
      this.infoList1 = [];
      this.dayPie = {
        total: 0,
        current: 0,
        rate: 0,
      }
      this.monthPie = {
        total: 0,
        current: 0,
        rate: 0,
      }
      let m = dayjs(monthId).month()
      let y = dayjs(monthId).year()
      let q = ''
      if (m < 3) {
        q = "Q1"
      } else if (m < 6) {
        q = "Q2"
      } else if (m < 9) {
        q = "Q3"
      } else {
        q = "Q4"
      }
      var quarterId = y + q;
      if (this.UserType == "DM") {
        this.getMessages(monthId, quarterId);
      }
      if (this.UserType == "RM") {
        this.getMessagesRM(monthId, quarterId);
      }
    },
    tabChange(name, title) {
    },
    TCPoints() {
      this.tc = !this.tc;
    },
    ClickOnTheMonth() {
      this.sameMonth = !this.sameMonth
      this.pointSeason = false;
    },
    ClickOnTheSeason() {
      this.pointSeason = !this.pointSeason
      this.sameMonth = false;
    },
    ClickDetails(territoryCd) {
      this.$router.push({path: "/dashboard/MRProgress", query: {territoryCd: territoryCd}})
    },
    ClickDetails1(territoryCd) {
      this.$router.push({path: "/dashboard/MRProgress", query: {territoryCd: territoryCd}})
    },
    //小数
    getFloat(num, n) {
      n = n ? parseInt(n) : 0;
      if (n <= 0) {
        return Math.round(num);
      }
      num = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
      num = Number(num).toFixed(n); //补足位数
      return num;
    },
    //饼图包含数据DM
    getProgreessMonthId(monthId) {
      let param = {
        territoryCd: this.token.territoryCd,
        monthId: monthId,
        quarterId: ""
      }
      getProgreessOfManageDataOnDM(param).then(res => {
        this.buName=res.data.email;
        if (res.errorCode == "0") {
          //月的数据
          //已完成人数
          this.dayPie.current = parseInt(res.data.completeStatus.completed);
          //未完成人数+已完成人数
          this.dayPie.total = parseInt(res.data.completeStatus.total);
          //百分比
          this.dayPie.rate = this.getFloat((parseInt(this.dayPie.current) / parseInt(this.dayPie.total)) * 100, 2) == "NaN" ? "0" : this.getFloat((parseInt(this.dayPie.current) / parseInt(this.dayPie.total)) * 100, 2)
          let breakWords = false;
          res.data.list.forEach(item => {
            // if((item.CC+item.targetCC).length>=4){
            //     breakWords=true
            // }
            // if((item.EC+item.targetEC).length>=4){
            //     breakWords=true
            // }
            //  if((item.SC+item.targetSC).length>=4){
            //      breakWords=true
            //  }
            if ((item.TC + item.targetTC).length >= 4) {
              breakWords = true
            }
            this.infoList.push({
              cc: item.CC == "" ? "0" : item.CC,
              ec: item.EC == "" ? "0" : item.EC,
              mem: item.MEM == "" ? "0" : item.MEM,
              sc: item.SC == "" ? "0" : item.SC,
              tc: item.TC == "" ? "0" : item.TC,
              tcplan: item.targetTC == "" ? "0" : item.targetTC,
              ccPlan: item.targetCC == "" ? "0" : item.targetCC,
              ecPlan: item.targetEC == "" ? "0" : item.targetEC,
              scPlan: item.targetSC == "" ? "0" : item.targetSC,
              territoryCd: item.territoryCd,
              name: item.territoryName,
              breakWords: breakWords
            });
            breakWords = false
          })
        }
      })
    },
    getProgreessQuarterId(quarterId) {
      let param = {
        territoryCd: this.token.territoryCd,
        quarterId: quarterId,
        monthId: ""
      }
      getProgreessOfManageDataOnDM(param).then(res => {
        this.buName=res.data.email;
        if (res.errorCode == "0") {
          //季的数据
          //已完成人数
          this.monthPie.current = parseInt(res.data.completeStatus.completed);
          //未完成人数+已完成人数
          this.monthPie.total = parseInt(res.data.completeStatus.total);
          //百分比
          this.monthPie.rate = this.getFloat((parseInt(this.monthPie.current) / parseInt(this.monthPie.total)) * 100, 2) == "NaN" ? "0" : this.getFloat((parseInt(this.monthPie.current) / parseInt(this.monthPie.total)) * 100, 2)
          let breakWords = false;
          res.data.list.forEach(item => {
            // if((item.CC+item.targetCC).length>=4){
            //     breakWords=true
            // }
            // if((item.EC+item.targetEC).length>=4){
            //     breakWords=true
            // }
            // if((item.SC+item.targetSC).length>=4){
            //     breakWords=true
            // }
            if ((item.TC + item.targetTC).length >= 4) {
              breakWords = true
            }
            this.infoList1.push({
              cc: item.CC == "" ? "0" : item.CC,
              ec: item.EC == "" ? "0" : item.EC,
              mem: item.MEM == "" ? "0" : item.MEM,
              sc: item.SC == "" ? "0" : item.SC,
              tc: item.TC == "" ? "0" : item.TC,
              tcplan: item.targetTC == "" ? "0" : item.targetTC,
              ccPlan: item.targetCC == "" ? "0" : item.targetCC,
              ecPlan: item.targetEC == "" ? "0" : item.targetEC,
              scPlan: item.targetSC == "" ? "0" : item.targetSC,
              territoryCd: item.territoryCd,
              name: item.territoryName,
              breakWords: breakWords
            });
            breakWords = false
          })
        }
      })
    },
    //数据 月季 接口
    getMessages(monthId, quarterId) {
      this.getProgreessMonthId(monthId);
      this.getProgreessQuarterId(quarterId);
    },
    //饼图包含数据RM
    getProgreessRMMonthId(monthId) {
      let param = {
        territoryCd: this.token.territoryCd,
        monthId: monthId,
        quarterId: ""
      }
      getProgreessOfManageDataOnRM(param).then(res => {
        this.buName=res.data.email;
        if (res.errorCode == "0") {
          //月的数据
          //已完成人数
          this.dayPie.current = parseInt(res.data.completeStatus.completed);
          //未完成人数+已完成人数
          this.dayPie.total =  parseInt(res.data.completeStatus.total);
          //百分比
          this.dayPie.rate = this.getFloat((parseInt(this.dayPie.current) / parseInt(this.dayPie.total)) * 100, 2) == "NaN" ? "0" : this.getFloat((parseInt(this.dayPie.current) / parseInt(this.dayPie.total)) * 100, 2)
          let breakWords = false;
          res.data.list.forEach(item => {
            // if((item.CC+item.targetCC).length>=4){
            //     breakWords=true
            // }
            // if((item.EC+item.targetEC).length>=4){
            //     breakWords=true
            // }
            // if((item.SC+item.targetSC).length>=4){
            //     breakWords=true
            // }
            if ((item.TC + item.targetTC).length >= 4) {
              breakWords = true
            }
            this.infoList.push({
              cc: item.CC == "" ? "0" : item.CC,
              ec: item.EC == "" ? "0" : item.EC,
              mem: item.MEM == "" ? "0" : item.MEM,
              sc: item.SC == "" ? "0" : item.SC,
              tc: item.TC == "" ? "0" : item.TC,
              tcplan: item.targetTC == "" ? "0" : item.targetTC,
              ccPlan: item.targetCC == "" ? "0" : item.targetCC,
              ecPlan: item.targetEC == "" ? "0" : item.targetEC,
              scPlan: item.targetSC == "" ? "0" : item.targetSC,
              territoryCd: item.territoryCd,
              name: item.territoryName,
              breakWords: breakWords
            });
            breakWords = false
          })
        }
      })
    },
    getProgreessRMQuarterId(quarterId) {
      let param = {
        territoryCd: this.token.territoryCd,
        quarterId: quarterId,
        monthId: ""
      }
      getProgreessOfManageDataOnRM(param).then(res => {
        this.buName=res.data.email;
        if (res.errorCode == "0") {
          //季的数据
          //已完成人数
          this.monthPie.current = parseInt(res.data.completeStatus.completed);
          //未完成人数+已完成人数
          this.monthPie.total = parseInt(res.data.completeStatus.total);
          //百分比
          this.monthPie.rate = this.getFloat((parseInt(this.monthPie.current) / parseInt(this.monthPie.total)) * 100, 2) == "NaN" ? "0" : this.getFloat((parseInt(this.monthPie.current) / parseInt(this.monthPie.total)) * 100, 2)
          let breakWords = false;
          res.data.list.forEach(item => {
            // if((item.CC+item.targetCC).length>=4){
            //     breakWords=true
            // }
            // if((item.EC+item.targetEC).length>=4){
            //     breakWords=true
            // }
            // if((item.SC+item.targetSC).length>=4){
            //     breakWords=true
            // }
            if ((item.TC + item.targetTC).length >= 4) {
              breakWords = true
            }
            this.infoList1.push({
              cc: item.CC == "" ? "0" : item.CC,
              ec: item.EC == "" ? "0" : item.EC,
              mem: item.MEM == "" ? "0" : item.MEM,
              sc: item.SC == "" ? "0" : item.SC,
              tc: item.TC == "" ? "0" : item.TC,
              tcplan: item.targetTC == "" ? "0" : item.targetTC,
              ccPlan: item.targetCC == "" ? "0" : item.targetCC,
              ecPlan: item.targetEC == "" ? "0" : item.targetEC,
              scPlan: item.targetSC == "" ? "0" : item.targetSC,
              territoryCd: item.territoryCd,
              name: item.territoryName,
              breakWords: breakWords
            });
            breakWords = false
          })
        }
      })
    },
    getMessagesRM(monthId, quarterId) {
      this.getProgreessRMMonthId(monthId);
      this.getProgreessRMQuarterId(quarterId);
    }
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  mounted() {
    //获取日期
    this.day = dayjs().format('YYYY/MM/DD')
    this.cal_label = dayjs(this.day).format('YYYY/MM')
    this.tokenString = this.$route.query.tokenStr;
    this.token = {territoryCd: this.$route.query.territoryCd}
    var monthId = dayjs(this.day).format('YYYYMM');
    let m = dayjs(this.day).month()
    let y = dayjs(this.day).year()
    let q = ''
    if (m < 3) {
      q = "Q1"
    } else if (m < 6) {
      q = "Q2"
    } else if (m < 9) {
      q = "Q3"
    } else {
      q = "Q4"
    }
    var quarterId = y + q;
    switch (this.$route.query.userType) {
      case "DM":
        setTimeout(() => {
          this.getMessages(monthId, quarterId);
        }, 1000)
        this.UserType = "DM"
        break;
      case "RM":
        setTimeout(() => {
          this.getMessagesRM(monthId, quarterId);
        }, 1000)
        this.UserType = "RM"
        break;
    }
    // this.UserType="RM"
    document
        .querySelector("body")
        .setAttribute(
            "style",
            "background: rgba(69, 69, 146, 0.10);padding: 0;margin: 0;"
        );

  },
}
</script>

<style src="./DM.css" scoped></style>